<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>注册用户</title>
<link rel="stylesheet" href="${ctx}/rs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${ctx}/rs/css/main.css"/>
<link rel="stylesheet" href="${ctx}/rs/css/new.css"/>
<script type="text/javascript" src="${ctx}/rs/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/layout.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/echarts.js"></script>
</head>
<body class="main_bd">
<div class="container-fluid">
    <div class="row">
        <div id="div1"></div>
		<div id="cont-right" class="col-md-10 cont-right">
		    <div class="title">
		        <img src="${ctx}/rs/images/mapicon.png" class="mapicon"/><strong>位置：&nbsp;</strong>&nbsp;用户管理<img src="${ctx}/rs/images/pointer.gif" class="pointer"/>注册用户管理
		        <input type="button" class="btn btn-primary btn-sm srt-btn active fr pb10" onclick="excel()" value="下载用户信息"/>
		    </div>
		    <div class="contContent"><br/>
		    <form id="form1"  method="post" action="${ctx}/userReport/register.htm">
		        <input name="timeType" id="timeType"  type="hidden" value="${report.timeType}"/>
		        <%-- <input name="count1" id="count1"  type="hidden" value="${count1}"/> --%>
		        <div class="userP">
		            <label class="regnum">注册用户数：<b class="col_red">${count1}</b>个</label>
		            <label id="label1" class="regnum <c:if test="${report.timeType==1 || report.timeType==null}">regnumcur</c:if>" onclick="choose(this,1)" >今天</label>
		            <%-- <label id="label2" class="regnum <c:if test="${report.timeType==2}">regnumcur</c:if>" onclick="choose(this,2)">昨天</label> --%>
		            <label id="label3" class="regnum <c:if test="${report.timeType==3}">regnumcur</c:if>" onclick="choose(this,3)">最近7天</label>
		            <label id="label4" class="regnum <c:if test="${report.timeType==4}">regnumcur</c:if>" onclick="choose(this,4)">最近30天</label>
		            <label id="label5" class="regnum <c:if test="${report.timeType==5}">regnumcur</c:if>" onclick="choose(this,5)">全部</label>
                	<div class="fr pb10" style="position: relative;">
                	    时间：<input type="text" id="startTime" name="startTime" class="srt-put1 widtime Wdate2"  onFocus="var endTime=$dp.$('endTime');WdatePicker({isShowClear:true, readOnly:true,onpicked:function(){endTime.focus();},dateFmt:'yyyy-MM-dd HH:mm:ss', maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d %H:%m:%s\'}', minDate:'#F{$dp.$D(\'endTime\',{d:-30})}'})" <c:if test="${report.timeType!='1' || report.timeType!='2' || report.timeType!='3'}"> value="${report.startTime}" </c:if> style="width:150px;"/>
                	    至<input type="text" id="endTime" name="endTime"  class="srt-put1 widtime Wdate2" onFocus="WdatePicker({isShowClear:true, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:30});}'})" value="${report.endTime}" style="width:150px;"/>
                	    <input type="button" class="btn btn-primary btn-sm srt-btn active" onclick="search()" value=" 搜  索 "/>
                	    
                	</div>
                </div>
            </form>
            <!-- <div class="userSee">
                <div class="radio">
                    <label><input type="radio" name="optionsRadios" id="optionsRadios0" value="" onclick="sel()">注册用户3</label>
                </div>
            </div> -->
            <p style="margin-left: 150px;">
                <div id="main" style="height:400px"></div>
            </p>
            <div class="statisT tablevote"><div style="margin-top: 27px;font-weight:bold">统计列表</div>
            <table class="table table-bordered" style="">
                <tbody>
                    <tr>
                        <th align="center">日期</th>
                        <th align="center">注册用户</th>
                    </tr>
                    <c:forEach var="report" items="${reportList}">
                        <tr>
                            <td>${report.createTime}</td>
                            <td>${report.userRegisterCount}</td>
                        </tr>
                    </c:forEach>
                    <c:if test="${count==0}">
                        <tr><td colspan="5" style="color: red">对不起，暂无数据！</td></tr>
                    </c:if>
                </tbody>
            </table>
            </div>
            <div class="gamesInfo InfoCol">
                <dt>温馨提示：</dt>
                <dd> 激活用户：下载客户端，并安装注册的用户，每用户只记一次。</dd>
            </div>  
            <div class="bottom_clear1"></div>
            </div>
	    </div>
    </div>
</div>
<script>

    //点击添加当前
    $(".userP label").click(function(){
    	$("this").addClass("regnumColor").siblings().removeClass("regnumColor");
    });
    
    //搜索
    function search(){
    	if($("#startTime").val()=="" || $("#endTime").val()==""){
    		bootstrapQ.alert("开始时间和结束时间不能为空！");
    		return;
    	}
    	$('#timeType').val('');
    	$('#form1').submit();
    }
    
    //选择日期搜索
    function choose(obj,type){
    	$('#timeType').val(type);
    	$(obj).addClass("regnumcur").siblings().removeClass("regnumcur");
    	$('#form1').submit();
    }
    
  //下载用户信息
    function excel(){
    	var num = 0;
		$('#table').find('tbody tr').each(function(i) {
			if (i == 0) {
				if ($(this).find("td").eq(0).html() == "没有找到匹配的记录") {
					num++;
				}
			}
		});
		if (num > 0) {
			bootstrapQ.alert("对不起，无数据！");
			return;
		} else {
			bootstrapQ.confirm(
					'确定要导出吗？',
					function() {
						var startTime = $("#startTime").val();
						var endTime = $("#endTime").val();
						window.location.href = "${ctx}/userReport/excelRegister.htm?startTime=" + startTime 
								+ "&endTime=" + endTime;
			});
		}
    }
</script>
<script type="text/javascript">

   // 路径配置
   require.config({
       paths: {
           echarts: '${ctx}/rs/js/'
       }
   });
   // 使用
   require(
       [
	        'echarts',
	        'echarts/chart/line', 
	        'echarts/chart/bar'
       ],
       function (ec) {
    		var arr = new Array(0);
    	 	var arrUserRegisterCount = new Array(0);
    	 	var date='${visitDate}';
    	 	var userRegisterCount='${userRegisterCount}';
    	 	//访问日期
    	 	date=date.substring(1,date.length-1);
    	 	var dates=date.split(",");
    	 	for(var i=0;i<dates.length;i++){
    	 		var d=dates[i].replace("\"","");
    	 		d=d.replace("\"","");
    	 		arr.push(d);
    	 	}
    	 	//注册用户数
    	 	if(userRegisterCount!="[]"){
    	 		userRegisterCount=userRegisterCount.substring(1,userRegisterCount.length-1);
	    	 	var userRegisterCounts=userRegisterCount.split(",");
	    	 	for(var i=0;i<userRegisterCounts.length;i++){
	    	 		arrUserRegisterCount.push(userRegisterCounts[i]);
	    	 	}
    	 	}else{
    	 		arrUserRegisterCount.push("0");
    	 	}
    	 	
           // 基于准备好的dom，初始化echarts图表
           var myChart = ec.init(document.getElementById('main')); 
           option = {
        		    title : {
        		        text: '',
        		        subtext: ''
        		    },
        		    tooltip : {
        		        trigger: 'axis'
        		    },
        		    legend: {
        		        data:['注册用户']
        		    },
        		    toolbox: {
        		        show : false,
        		        feature : {
        		            mark : {show: true},
        		            dataView : {show: true, readOnly: false},
        		            magicType : {show: true, type: ['line', 'bar']},
        		            restore : {show: true},
        		            saveAsImage : {show: true}
        		        }
        		    },
        		    calculable : true,
        		    xAxis : [
        		        {
        		            type : 'category',
        		            boundaryGap : false,
        		            data : arr
        		        }
        		    ],
        		    yAxis : [
        		        {
        		            type : 'value',
        		            splitArea: { show:true },
        		            axisLabel : {
        		                formatter: '{value}'
        		            }
        		        }
        		    ],
        		    series : [
        		        {
        		            name:'注册用户',
        		            type:'line',
        		            data:arrUserRegisterCount
        		        }
        		    ],
        		    
        		};
           // 为echarts对象加载数据 
           myChart.setOption(option); 
       }
   );

</script>
</body>
</html>